<template>
  <div class="overview">
    <div class="popular">
      <div class="popular-title hyphenOfTitle">
        热门项目
      </div>
      <div class="popular-content">
        <el-card class="box-card projects">
          <ul class="project-list" v-infinite-scroll="load" infinite-scroll-distance="30px">
            <li v-for="item, index in projectLoadArr" :key="item.pro_id" @click="projectClickEvent(item.pro_id)">
              <el-card class="box-card project">
                <div class="project-img">
                  <el-image style="width: 150px; height: 150px" :src="'http://127.0.0.1:3000/uploads' + item.pro_cover" fit="fill" slot="images" />
                </div>
                <div class="project-message">
                  <h3>{{ item.pro_title }}</h3>
                  <div class="project-message-overview">
                    <span>{{ item.pro_biography }}</span>
                  </div>
                  <div class="project-message-price">价格: <span style="font-weight: 700;">{{ item.price }}</span></div>
                </div>
              </el-card>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, markRaw } from "vue"
import { useRoute, useRouter } from 'vue-router'
import { IProjectInfo } from "./type"
import Service from "@/utils/axios"

let arr: any[] = [];
const router = useRouter();

// 瀑布流
const count = ref(4)
const projectLoadArr = ref<any[]>([])
// const projectsInfo: IProjectInfo[] = reactive([
//   {
//     projectTitle: '项目名1',
//     projectId: '0001',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户1',
//     userId: '10001',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名2',
//     projectId: '0002',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户2',
//     userId: '10002',
//     likeNum: 0,
//     collectionNum: 0,
//     viewsNum: 0,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名3',
//     projectId: '0003',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户3',
//     userId: '10003',
//     likeNum: 1,
//     collectionNum: 1,
//     viewsNum: 1,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名4',
//     projectId: '0004',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户4',
//     userId: '10004',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名5',
//     projectId: '0001',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户1',
//     userId: '10001',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名6',
//     projectId: '0002',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户2',
//     userId: '10002',
//     likeNum: 0,
//     collectionNum: 0,
//     viewsNum: 0,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名3',
//     projectId: '0003',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户3',
//     userId: '10003',
//     likeNum: 1,
//     collectionNum: 1,
//     viewsNum: 1,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名4',
//     projectId: '0004',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户4',
//     userId: '10004',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名1',
//     projectId: '0001',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户1',
//     userId: '10001',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名2',
//     projectId: '0002',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户2',
//     userId: '10002',
//     likeNum: 0,
//     collectionNum: 0,
//     viewsNum: 0,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名3',
//     projectId: '0003',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户3',
//     userId: '10003',
//     likeNum: 1,
//     collectionNum: 1,
//     viewsNum: 1,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名4',
//     projectId: '0004',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户4',
//     userId: '10004',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名1',
//     projectId: '0001',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户1',
//     userId: '10001',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名2',
//     projectId: '0002',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户2',
//     userId: '10002',
//     likeNum: 0,
//     collectionNum: 0,
//     viewsNum: 0,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名3',
//     projectId: '0003',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户3',
//     userId: '10003',
//     likeNum: 1,
//     collectionNum: 1,
//     viewsNum: 1,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
//   {
//     projectTitle: '项目名4',
//     projectId: '0004',
//     projectMessage: '项目概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述概述概述概述项目概述概述概述项目概述概述',
//     username: '测试用户4',
//     userId: '10004',
//     likeNum: 12,
//     collectionNum: 12,
//     viewsNum: 12,
//     releaseTime: '2023-2-7 12:15:30',
//     latestTime: '2023-2-7 12:15:30',
//     text: '项目内容',
//     cover: '/images/project-image/code1.jpg',
//     images: [],
//     file: '',
//   },
// ])

let load = () => {
  projectLoadArr.value.push(...arr.slice(count.value, count.value += 4))
}
// 获取全部项目信息
const handleGetProjectInfo = () => {
  Service.get('/bkapi/projectInfo/getProjectinfoAll?offset=1').then((res: any) => {
    arr = ([...res.data?.rows])
    projectLoadArr.value.push(...arr.slice(0, 4))
  })
}

// 项目点击事件 跳转到项目详情页
const projectClickEvent = (projectId: string) => {
  console.log('被点击的项目id',projectId)
  router.push({
    name: 'Project',
    params: {id: projectId}
  })
}


onMounted(() => {
  // 请求项目信息
  handleGetProjectInfo()
})

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.overview {
  margin: 20px 20px 0 20px;

  .popular {

    &-title {
      font-size: 25px;
      text-align: center;
    }

    &-content {
      padding: 20px 20px 0 20px;

      .projects {
        min-height: 200px;

        &> :deep(.el-card__body) {
          padding: 0 30px;

          .el-card {
            width: 250px;
          }
        }

        .project-list {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-top: 30px;

          &>li {
            width: calc((100% - 80px) / 4);
            margin-right: 20px;
            margin-bottom: 14px;
          }

          &>li:nth-of-type(4n+0) {
            margin-right: 0;
          }
        }

        .project {
          height: 400px;
          margin: 0 auto;

          &> :deep(.el-card__body) {
            // position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
          }

          .project-img {
            margin: 0 auto;
            margin-top: 30px;
            width: 150px;
            height: 150px;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 5px 5px 5px 5px @border-color;
          }

          .project-message {
            margin: 0 auto;
            margin-top: 20px;
            width: 150px;
            height: 150px;
            padding: 15px;
            border-top: 2px solid @border-color;

            position: relative;

            h3 {
              font-size: 16px;
            }

            .project-message-overview {
              height: 40px;
              margin-top: 10px;
              display: -webkit-box !important;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .project-message-price {
              position: absolute;
              bottom: 50px;
              left: 10;
              font-size: 16px;
              color: #ff723e;
            }
          }

        }
      }

    }
  }
}

// 标题中划线
.hyphenOfTitle::before,
.hyphenOfTitle::after {
  content: "";
  display: inline-block;
  width: 80px;
  border-top: 1px solid #d2d2d3;
  position: relative;
  top: -10px;
}

.hyphenOfTitle::before {
  right: 20px;
}

.hyphenOfTitle::after {
  left: 20px;
}
</style>